<template>
 


  <!-- 侧边栏 -->
  <el-menu  text-color="#000" style="width: 200px;position: relative;top:100px"
    @open="handleOpen" @close="handleClose" router>

    <!-- 订单中心 -->
    <el-menu-item index="order">
      <template #title>
        <el-icon>
          <TrendCharts />
        </el-icon>
        <span>订单中心</span>
      </template>
    </el-menu-item>

    <!-- 本人车票 -->
    <el-menu-item index="myticket">
      <template #title>
        <el-icon>
          <List />
        </el-icon>
        <span>本人车票</span>
      </template>
    </el-menu-item>

    <!-- 会员中心 -->
    <el-menu-item index="vip">
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>会员中心</span>
      </template>
    
    </el-menu-item>

      <!-- 个人信息 -->
      <el-sub-menu index="myinfo">
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>个人信息</span>
      </template>
      <el-menu-item index="view">查看个人信息</el-menu-item>
      <el-menu-item index="security">账号安全</el-menu-item>
      <el-menu-item index="tel">手机核验</el-menu-item>

    </el-sub-menu>

      <!-- 常用信息管理 -->
      <el-sub-menu index="user">
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>常用信息管理</span>
      </template>
      <el-menu-item index="passenger">乘车人管理</el-menu-item>
      <el-menu-item index="address">地址管理</el-menu-item>
    </el-sub-menu>

  </el-menu>
  <RouterView />


</template>

<script setup lang="ts">



import {  TrendCharts, List, UserFilled } from '@element-plus/icons-vue'
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>